<extend name="Public:base" />
<block name="title"><title>心e购-产品区</title></block>
<block name="body">
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">产品区</h1>
	</header>
	<div class="mui-content">
		<div class="mui-row">
			<div class="mui-col-sm-3 mui-col-xs-3">
				<div class="left_Bar">
					<volist name="area_list" id="vo">
					<a href="/Wap/Product/index?area_id={$vo.shop_area_id}" <if condition="$vo.shop_area_id EQ $area_id">class="active"</if>>{$vo.shop_area_name}</a>
					</volist>
				</div>
			</div>

			<div class="right-scroll-box mui-scroll-wrapper" id="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="right_list">
						<ul class="mui-table-view " id="list-data">
							<volist name="goods" id="good">
							<li class="mui-table-view-cell mui-media">
								<a href="/Wap/Product/detail?id={$good.id}">
									<div class="right_list_box">
										<div class="img_box">
											<img height="100" src="{$good.pic}">
										</div>
										<div class="mui-media-body">
											<p class="mui-ellipsis-2">
												{$good.productname}
											</p>
											<p class="right_list_jg">
												<span class="add mui-pull-left">广州</span>
												<span class="price mui-pull-right">
													<if condition="$good.price gt 0">￥{$good.price}</if>
													<if condition="$good.point_num gt 0">
														<if condition="$good.price gt 0">+</if>
														积分：{$good.point_num}
													</if>
													<if condition="$good.coin_num gt 0">积分：{$good.coin_num}</if>
												</span>
											</p>
										</div>
									</div>
								</a>
							</li>
							</volist>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</block>
<block name="script">
	<script type="text/javascript" charset="utf-8">
		//mui("#mui-scroll-wrapper").scroll();
		var peg = 2;
		$list_data = mui('#list-data');
		mui.init({
			pullRefresh: {
				container:"#mui-scroll-wrapper",
				up: {
					height: 30,
					contentrefresh : "正在加载...",
					contentnomore:'没有更多数据了',
					callback: function() {
						var _this = this;
						mui.post('/Wap/Product/index?area_id={$area_id}', { peg: peg}, function(data) {
							if(data == 0) {
								_this.endPullupToRefresh(true);
							} else {
								_this.endPullupToRefresh(false);
								mui.each(data, function(k, v) {
									var html = '<a href="/Wap/Product/detail?id=' + v.id + '">';
										html += '<div class="right_list_box">';
											html += '<div class="img_box"><img height="100" src="' + v.pic + '"></div>';
											html += '<div class="mui-media-body">';
												html += '<p class="right_list_jg"><span class="add mui-pull-left">广州</span>';
													html += '<span class="price mui-pull-right">';
														if(v.price > 0) {
															html += '￥' + v.price;
														}
														if(v.point_num > 0) {
															if(v.price > 0) {
																html += "+";
															}
															html += '积分：' + v.point_num;
														}
														if(v.coin_num > 0) {
															html += '增值币：' + v.coin_num;
														}
													html += '</span>';
												html += '</p>';
											html += '</div>';
										html += '</div>';
									html += '</a>';
									var li = document.createElement("li");
									li.className = "mui-table-view-cell mui-media";
									li.innerHTML = html;
									$list_data[0].appendChild(li);
								});
							}
							peg++;
						}, 'json');
					}
				}
			}
		});
	</script>
</block>